<template>
  <div class="login">
    <!-- 导航 -->
    <van-nav-bar @click-left="$router.push('/my')">
      <template #left>
        <van-icon name="arrow-left" size="18" class="yse" />
      </template>
    </van-nav-bar>
    <!-- 你好 -->
    <div class="deng">
      <h4>你好 , 请先登录</h4>
    </div>

    <!-- 手机 form表单 -->
    <van-form @submit="onSubmit">
      <div class="group">
        <van-cell-group>
          <van-field
            v-model="mobile"
            placeholder="请输入手机号"
            class="shouj"
            :rules="rules.mobile"
          >
            <template #left-icon>
              <i class="iconfont iconbianzu1 ii"></i>
            </template>
          </van-field>
          <!-- 验证码 -->
          <van-field
            v-model="code"
            clearable
            left-icon="music-o"
            placeholder="请输入短信验证码"
            :rules="rules.code"
          >
            <!-- 可以使用两个插槽 -->
            <template #left-icon>
              <i class="iconfont iconyanzhengma yz"></i>
            </template>
            <template #button>
              <van-button
                size="small"
                plain
                type="primary"
                class="btnn"
                @click="codee"
                v-if="zttime"
                >{{ time }}s重试</van-button
              >
              <van-button
                size="small"
                plain
                type="primary"
                class="btnn"
                @click="codee"
                v-else
                >发送验证码</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
        <!-- 用户协议 -->
        <div class="xieyi">
          登录即同意 <span>《用户使用协议》</span> 和 <span>《隐私协议》</span>
        </div>
        <!-- 登录按钮 -->
        <van-button type="danger" class="danger" round :loading="myLoading"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { getCode, login } from '@/api/api.js'
import { setLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      mobile: '18888881111', // 手机号
      code: '', // 验证码
      myLoading: false, // loading加载状态
      time: 60, // 倒计时60秒
      zttime: false, // 倒计时状态
      cleartime: null, // 定时器

      rules: {
        mobile: [
          {
            required: true,
            message: '请填写正确的手机号码',
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            trigger: 'onChange'
          }
        ],
        code: [
          {
            required: true,
            message: '请填写四位验证码',
            pattern: /\d{4}/,
            trigger: 'onChange'
          }
        ]
      }
    }
  },
  methods: {
    // 发送验证码
    async codee () {
      // 1.将倒计时状态改为true 2.倒计时60秒开启, 3.清空定时器 4.loding改为true,5.开启定时器,判断>1秒time减减,否则就等于60 清除定时器 倒计时状态flase
      // 发送请求服务器,倒计时状态为false,赋值给验证码弹框
      this.zttime = true
      this.time = 60
      clearInterval(this.cleartime)
      this.$toast.loading({
        forbidClick: true
      })
      this.cleartime = setInterval(() => {
        if (this.time > 1) {
          this.time--
        } else {
          this.time = 60
          clearInterval(this.cleartime)
          this.zttime = false
        }
      }, 1000)
      const res = await getCode({ mobile: this.mobile })
      //   console.log(res)
      this.$toast.success(res.data)
      this.code = res.data
      this.zttime = false
    },
    // 登录
    // 1.判断login为true时会一直显示加载状态 2.发送请求服务器,3.关闭login加载状态,4.判断当前页面是不是login页面,是的话跳转my,如果是别的页面退出,将会回退到之前的页面,5.保存token,6.集中提示错误信息,关闭状态

    async onSubmit (value) {
      //   console.log(value)
      if (this.myLoading === true) {
        return
      }
      try {
        const res = await login({
          mobile: this.mobile,
          code: this.code
        })
        this.myLoading = false
        console.log(res)
        if (this.$router.path === login) {
          this.$router.push('/my')
        } else {
          this.$router.go(-1)
        }
        setLocal(res.data.jwt)
      } catch {
        this.$toast.fail('你的手机号或验证码有误')
      }
      this.zttime = false
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  .yse {
    color: tomato;
  }
  .ii {
    color: skyblue;
  }
  .yz {
    color: pink;
  }
  /deep/ .btnn {
    background-color: #fff;
    border: 0px;
    border-left: 1px solid #f3f5f6;
    color: #00b8d4;
  }
  .deng {
    padding: 0 20px;
    width: 100%;
    height: 200px;
    line-height: 200px;
    // font-family: SimSun;
    font-weight: 700;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
  }
  .group {
    padding: 0 20px;
  }
  .shouj {
    border-top: 0.5px solid #f3f5f6;
  }
  .xieyi {
    font-size: 14px;
    margin: 15px 0 80px 0;
    span {
      color: #00b8d4;
    }
  }
  .danger {
    width: 100%;
    color: #fff;
  }
}
</style>
